<template>
  <div class="student-page">
    <h2 style="margin-top:0;">信息维护</h2>
    <el-card shadow="never" class="profile-card" v-loading="loading">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" style="max-width:520px;">
        <el-form-item label="学号">
          <el-input v-model="form.number" disabled />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="教学系">
          <el-input v-model="form.department" disabled />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="form.major" disabled />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="form.className" disabled />
        </el-form-item>
        <el-form-item label="Email" prop="email">
          <el-input v-model="form.email" placeholder="用于找回密码 / 通知" />
        </el-form-item>
        <el-form-item label="生日">
          <el-input v-model="form.birthday" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.newPassword" type="password" placeholder="不修改请留空" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="saving" @click="submit">确认更新</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-alert class="mt" type="info" :closable="false" title="当前接口未提供学生信息更新示例，只做前端表单与本地缓存演示。接入后端时补充 /api/student/profile (GET/PUT)。" />
  </div>
</template>
<script>
import { getStudentInfo, saveStudent } from '@/api'
export default { name:'StudentProfileView',
  data() { return {
    loading:false,
    saving:false,
    origin:{},
    form:{
      id:'', number:'', name:'', department:'', major:'', className:'', email:'', birthday:'', sex:1, newPassword:''
    },
    rules:{
      name:[{ required:true, message:'请输入姓名', trigger:'blur' }],
      email:[{ type:'email', message:'邮箱格式不正确', trigger:'blur' }]
    }
  }},
  created() { this.load() },
  methods:{
    async load() {
      this.loading = true
      try {
        const res = await getStudentInfo()
        const s = res.data || {}
        const mapped = {
          id: s.id,
          number: s.number || '',
          name: s.name || '',
          department: s.departmentName || '',
          major: s.majorName || '',
          className: s.className || '',
          email: s.email || '',
          birthday: s.birthday || '',
          sex: typeof s.sex === 'number' ? s.sex : 1,
          newPassword: ''
        }
        this.origin = JSON.parse(JSON.stringify(mapped))
        Object.assign(this.form, mapped)
      } catch(e) {
        this.$message.error('获取学生信息失败')
      } finally { this.loading = false }
    },
    submit() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        this.saving = true
        try {
          // 只允许提交部分字段
          const payload = {
            id: this.form.id,
            name: this.form.name,
            number: this.form.number,
            email: this.form.email,
            birthday: this.form.birthday,
            sex: this.form.sex,
            password: this.form.newPassword || undefined
          }
          await saveStudent(payload)
          this.$message.success('保存成功')
          this.load()
        } catch(e) {
          this.$message.error('保存失败')
        } finally { this.saving = false }
      })
    },
    reset() {
      Object.assign(this.form, JSON.parse(JSON.stringify(this.origin)), { newPassword:'' })
    }
  }
}
</script>
<style scoped>
.student-page { padding:16px; }
.profile-card { margin-top:8px; }
.mt { margin-top:16px; }
</style>
